<template>
  <div>
      <homeHeader></homeHeader>
      <!-- v-model绑定的是当前激活的tab的索引值 -->
      <van-tabs v-model="activeTab" sticky swipeable>
            <van-tab 
            v-for="(tabItem,index) in tabList " 
            :key="index"
            :title="tabItem.name">
            <!-- 将文章数据遍历，将每一段文章传入子组件渲染 -->
            <post :post="post" v-for="(post,index) in tabItem.posts" :key="index"></post>
            </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import homeHeader from '../components/homeHeader'
import post from '../components/post'
export default {
  components:{
    homeHeader,
    post
  },
  data(){
    return{
      // 这里可以控制当前显示的选项
      // 有登录的话第一的分类是关注，没登陆的话第一个分类是头条
      activeTab:localStorage.getItem('token')?1:0,
      tabList:[]
    }
  },
  watch:{
    // 监听当前激活分类tabIndex的变化，不断切换，重新拉取文章数据
    activeTab(newActiveTab){
       if (this.tabList[newActiveTab].posts.length == 0) {
            // 如果这个被选中的 tabIndex 对应哪个 tab 对象里面的 posts 长度为 0 
            // 证明没有数据,于是发送请求,不然就不去管
            this.getTabPosts(newActiveTab);
        }
    }
  },
  methods:{
    initTabList(){
      // 发送请求，获取数据
      this.$axios({
        url:'/category',
        method:'get',
        headers:{
            Authorization: localStorage.getItem('token')
        }
      }).then(res=>{
        const {data} = res.data;
        data.forEach(element=>{
          // 给每个tab增加一个存放文章的空数组
          element.posts = []
        })
        this.tabList = data;
        console.log(this.tabList);
        this.getTabPosts(this.activeTab);
      })
    },
    // 获取文章数据的方法
    getTabPosts(tabIndex){
      // 因为获取文章需要一个传入文章的id
      // 这个id可以通过tabList[tabIndex].id获得  例如文章id=999
      const categoryId = this.tabList[tabIndex].id;
      this.$axios({
        url:'/post',
        method:'get',
        params:{
          category:categoryId
        },
        headers:{
                 Authorization: localStorage.getItem('token')
        }
      }).then(res=>{
        const {data} = res.data;
        // 将获取到的文章数据放入每个对象的posts当中
        this.tabList[tabIndex].posts = data;
        console.log(data);

      })
    }
  },
  mounted(){
    this.initTabList();
  }
}
</script>

<style>

</style>